<template>
  <el-container class="layout-container-demo">
    <NavMemu :width="width" :collapse="collapse"></NavMemu>
    <el-aside :width="width">
      <h4>千锋管理系统</h4>
      <el-menu
        :collapse="collapse"
        :default-openeds="['1', '3']"
        router
        active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff"
      >
      <el-menu-item index="/home/about">首页</el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><message /></el-icon><span>账户管理</span>
          </template>
          <!-- <el-menu-item index="/home/about">首页</el-menu-item> -->
          <el-sub-menu></el-sub-menu>
          <el-menu-item index="/home/manage/manageList">管理员列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><icon-menu /></el-icon><span>轮播图管理</span>
          </template>
          <el-menu-item index="/home/swipemanage/swipelist">轮播图列表</el-menu-item>
          <el-menu-item index="2-2">Option 2</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><setting /></el-icon>产品管理
          </template>
          <el-menu-item index="3-1"
            ><el-icon><setting /></el-icon>Option 1</el-menu-item
          >
          <el-menu-item index="3-2"
            ><el-icon><setting /></el-icon>Option 2</el-menu-item
          >
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="display: flex; justify-content: space-between; font-size: 12px">
        <!-- <h3>千锋管理系统</h3> -->
        <el-icon :size="20" @click="collapse=!collapse">
          <component :is="getIcon"></component> <!--动态组件 -->
        </el-icon>
        {{ collapse }}
        <el-dropdown @command="quit">
          <span class="el-dropdown-link">
            你好:{{ userInfo.adminname }}
            <!-- 显示登录后的用户名 -->
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="a">关于</el-dropdown-item>
              <el-dropdown-item command="q">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <el-main>
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {
  Menu as IconMenu,
  Message,
  Setting,
  ArrowDown,
  Expand,
  Fold,
} from "@element-plus/icons-vue";
import { getAdminList } from "../service/admin";
import { ElMessage } from "element-plus"; // 消息提示框
import NavMemu from "../components/NavMenu.vue"

export default {
  components: {
    IconMenu,
    Message,
    Setting,
    ArrowDown, // 退出功能-- 下拉菜单图标
    NavMemu,
    Expand,
    Fold,
  },
  data(){
    return{
      collapse:false,
    }
  },
  created() {
    // 返回token无效的解决方法
    getAdminList().then((res) => {
      console.log(res);
    });
  },
  computed: {
    // 显示登录后的用户名
    userInfo() {
      // 提取仓库里面的数据（登录用户消息）
      return this.$store.state.userInfo;
    },
    getIcon(){   // 控制导航条展开折叠的图标  动态组件
      return this.collapse?"Expand":"Fold"
    },
    width(){  //控制导航条展开折叠的图标
      return !this.collapse?"50px":"200px"
    }
  },
  methods: {
    quit(str) {
      // 退出登录 功能
      // alert(str,'quit')
      switch (str) {
        case "a":
          ElMessage({
            message: "暂不处理",
            type: "warning",
          });
          break;
        case "q":
          localStorage.removeItem("token");
          this.$store.commit("userInfo", {});
          this.$router.push("/login");
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style>
html,
body,
#app,
.el-container,
.el-aside {
  height: 100vh;
}
.el-aside {
  background-color: #545c64;
}
</style>
